<template>
  <!--数字-->
  <el-input-number
    v-if="meta.controlType === EControlType.number"
    v-model="value"
    v-bind="$attrs"
    :id="'c' + meta.columnId"
    :name="'c' + meta.columnId"
    :clearable="clearable"
    :controls-position="controlsPosition"
  >
  </el-input-number>
  <!--五星评分-->
  <el-rate
    v-else-if="meta.controlType === EControlType.rate"
    v-model="value"
    v-bind="$attrs"
    :id="'c' + meta.columnId"
    :name="'c' + meta.columnId"
    :clearable="clearable"
  >
  </el-rate>
  <!--数字滑块-->
  <el-slider
    v-else
    v-model="value"
    v-bind="$attrs"
    :id="'c' + meta.columnId"
    :name="'c' + meta.columnId"
    :clearable="clearable"
  >
  </el-slider>
  <circle-close-filled
    v-if="clearable && meta.controlType !== 111"
    style="width: 1.2em; height: 1.2em; margin-top: 0px; margin-left: 5px;cursor: pointer;"
    @click.stop="myclear" 
  />
</template>

<script setup lang="ts" generic="T extends object">
  import { CircleCloseFilled } from '@element-plus/icons-vue'
  import type { IFormChildProps } from '../map'
  import { itemController, EControlType } from '../map'
  import type { Ref } from 'vue'

  defineOptions({
    name: 'nf-el-from-item-number',
    inheritAttrs: false,
  })
  // 引入组件需要的属性 引入表单子控件的管理类
  const props = withDefaults(defineProps<IFormChildProps<T> & {
    controlsPosition?: '' | 'right'
  }>(), {
    meta: () => {
      return {
        colName: '',
        controlType: EControlType.number
      }
    },
    model: () => {
      return {} as T
    },
    clearable: true,
    controlsPosition: 'right'
  })
  
  const { value } = itemController(props)
 
  const myclear = () => {
    (value as Ref).value = null
  }
 
</script>
